<template>
  <BoxSkin class="search" type="bottom" py-5 px-10>
    <Icon :is="HamburgerButton" theme="filled" size="24" fill="#9b9b9b" />
    <div class="search__input" mx-10 bor-base bor-4>
      <Icon :is="Search" size="18" fill="#9b9b9b" class="search__input__icon" />
      <input type="text" placeholder="搜索" />
    </div>
    <Icon :is="MoreTwo" size="24" fill="#9b9b9b" />
  </BoxSkin>
</template>

<script setup>
import { HamburgerButton, Search, MoreTwo } from "@icon-park/vue-next";
import BoxSkin from "@/components/box-skin/BoxSkin.vue";
import Icon from "@/components/icon/Icon.vue";
</script>

<style scoped lang="scss">
@include b(search) {
  display: flex;
  align-items: center;
  @include e(input) {
    position: relative;
    padding-left: 25px;
    height: 30px;
    line-height: 30px;
    border-color: $color-primary;
    @include e(icon) {
      position: absolute;
      left: 5px;
      top: 50%;
      margin-top: 4px;
      transform: translateY(-50%);
    }
    flex: 1;
    input {
      width: 100%;
      height: 100%;
      border: none;
      background-color: transparent;
      font-size: 14px;
    }
  }
}
</style>
